<template>

	<view>
		<!-- 标题-->
		<cu-custom bgColor="bg-gradual-red" :isBack="true">
			<block slot="content">购物车列表</block>
		</cu-custom>
		<!-- 没有商品信息的提示-->
		<view class="solids-bottom padding-xs flex align-center" v-if="cartList.length==0">
			<view class="flex-sub text-center">
				<view class="solid-bottom text-xsl padding">
					<text class=" cuIcon-cart "></text>
				</view>
				<view class="padding">购物车空空如也，你应该去逛逛哦</view>
				<view>
					<navigator open-type="switchTab" url="../index/index">
						<button class="cu-btn line-green round">去首页</button>
					</navigator>
				</view>
			</view>
		</view>
		<!--购物车列表区域 -->


		<view class="cu-list menu-avatar">

			<view class="cu-item cur" v-for="(item,index)  in cartList " :key="index">
				<view class="cu-avatar radius lg" :style="{'background-image':'url('+imageSrc+item.skuImage+');'}">
					<view class="cu-tag badge"></view>
				</view>
				<view class="content">
					<view>
						<view class="text-cut">{{item.skuName}}</view>
					</view>
					<view class="text-gray text-sm flex">
						<view>
							<text class="text-bold   text-lg" @click="handleAddCount" :data-id="item.skuId">+</text>
							<text class="solid  margin-left  my-margin-right   padding-xs  "> {{item.skuCount}}</text>
							<text class="text-bold   text-lg" @click="handleMinusCount" :data-id="item.skuId">-</text>

						</view>


					</view>

				</view>
				<view class="action">
					<view class="text-grey text-xs text-price">{{item.skuPrice/100}}</view>
					<view class="text-price">
						{{item.skuPrice/100*item.skuCount}}
					</view>
				</view>
			</view>
		</view>

		<!-- 底部状态栏-->
		<view  v-if="cartList.length>0"  class="cu-bar bg-white tabbar border  foot shop">
			<button class="action" open-type="contact">
				<view class="cuIcon-service text-green">
					<view class="cu-tag badge"></view>
				</view>
				客服
			</button>
			<view class="action">
				共计:
				<text class="text-lg"> {{totalCount}}</text>



			</view>
			<view class="action">

				合计:
				<text class="text-price text-lg">{{ totalPrice }}</text>
			</view>
			<view class="btn-group">
				<button class="cu-btn bg-red   shadow-blur"  @click="handleToSubmit" >结算</button>
			</view>
		</view>


		<!-- 结束-->
	</view>

</template>

<script>
	export default {
		data() {
			return {
				imageSrc: this.$global.imageSrc, //图片的服务器地址
				cartList: [],
				customerId: this.$global.userinfo.id,
				cartId: ''
			}
		},
		onLoad() {
			this.init();
		},
		onPullDownRefresh() {
			//再次查询一次
			this.cartList=[];
			this.$api.__api__cart_list(this.customerId).then((res) => {
				this.cartList = res.data.items;
				uni.stopPullDownRefresh();
			})


		},
		//动态计算的属性 （Vue.js）
		computed: {
			totalCount: function() {
				var c = 0;
				this.cartList.forEach(v => {
					c += v.skuCount
				})
				return c;
			},
			totalPrice: function() {
				var p = 0;
				this.cartList.forEach(v => {
					p += v.skuCount * v.skuPrice / 100;
				});
				return p;
			}




		},
		methods: {
			init: function() {
				this.$api.__api__cart_list(this.customerId).then((res) => {
					this.cartList = res.data.items;
					//获取购物车ID
					this.cartId = res.data.id;
				})

			},
			//-
			handleMinusCount: function(e) {
				//商品编号
				var skuId = e.currentTarget.dataset.id;
				var count = 0;
				this.cartList.forEach(v => {
					if (v.skuId == skuId) {
						count = v.skuCount;
						return;
					}
				})
				count--;
				//更新数据库
				this.$api.__api__cart_update({
					cartId: this.cartId,
					count: count,
					skuId: skuId

				}).then((res) => {

					uni.showToast({
						title: '更新购物车成功',
						duration: 3000
					});

					//才能更新页面
					this.cartList = res.data.items;
					console.log(JSON.stringify(res.data.items))


				})







			},
			//
			handleAddCount: function(e) {
				///商品编号
				var skuId = e.currentTarget.dataset.id;
				//商品的数量 
				var count = 0;
				this.cartList.forEach(v => {
					if (v.skuId == skuId) {
						count = v.skuCount;
						return;
					}
				})
				count++;
				//更新数据库
				this.$api.__api__cart_update({
					cartId: this.cartId,
					count: count,
					skuId: skuId

				}).then((res) => {

					uni.showToast({
						title: '更新购物车成功',
						duration: 3000
					});

					//才能更新页面
					this.cartList = res.data.items;
					console.log(JSON.stringify(res.data.items))


				})



			},
			handleToSubmit:function(){
				uni.navigateTo({
					url:'../submit/submit'
				})
			}



		}
	}
</script>

<style>
	.my-margin-right {
		margin-right: 30upx;
	}
</style>
